import { Suspense, lazy, useMemo } from 'react'
import { NavBar, Skeleton } from 'antd-mobile'
import NoFound from '@views/noFound'
import style from './index.module.less'

const elements = {
  login: lazy(() => import('@views/login')),
  admin: lazy(() => import('@views/admin')),
  verification: lazy(() => import('@views/verification')),
  modifyPassword: lazy(() => import('@views/modifyPassword')),
  caseDetail: lazy(() => import('@src/views/case/detail')),
  addCaseProtocol: lazy(() => import('@src/views/case/protocol')),
  addCaseTypeSelect: lazy(() => import('@src/views/case/typeSelect')),
  caseEdit: lazy(() => import('@src/views/case/edit')),
  editParty: lazy(() => import('@src/views/case/editParty')),
  editAgent: lazy(() => import('@src/views/case/editAgent')),
  editAccord: lazy(() => import('@src/views/case/editAccord')),
  editApplyDoc: lazy(() => import('@src/views/case/editApplyDoc')),
  editClaim: lazy(() => import('@src/views/case/editClaim')),
  editReason: lazy(() => import('@src/views/case/editReason')),
  editCauseAction: lazy(() => import('@src/views/case/editCauseAction')),
  editEvidence: lazy(() => import('@src/views/case/editEvidence')),
  selectArbitrator: lazy(() => import('@src/views/case/operate/selectArbitrator')),
  addDefence: lazy(() => import('@src/views/case/operate/addDefence')),
  newsList: lazy(() => import('@views/newsList')),
  newsDetail: lazy(() => import('@views/newsDetail')),
  gonggaoList: lazy(() => import('@views/gonggaoList')),
  gonggaoDetail: lazy(() => import('@views/gonggaoDetail')),
  caselibList: lazy(() => import('@views/caselibList')),
  caselibDetail: lazy(() => import('@views/caselibDetail')),
  doclibList: lazy(() => import('@views/doclibList')),
  doclibDetail: lazy(() => import('@views/doclibDetail')),
  knowledgelibList: lazy(() => import('@views/knowledgelibList')),
  knowledgelibDetail: lazy(() => import('@views/knowledgelibDetail')),
  home: lazy(() => import('@views/home')),
  institutions: lazy(() => import('@views/institutions')),
  chartDetail: lazy(() => import('@views/chartDetail'))
}

function Main ({ element, title, meta = {} }) {
  const Element = useMemo(() => {
    const o = elements[element]
    if (o !== undefined) {
      return o
    }
    return NoFound
  }, [element])
  return (
    <div className={style.contaienr}>
      <div className={style.body}>
        <div className={style.inner}>
          <Suspense fallback={<div className={style.loading}><Skeleton.Paragraph animated /></div>}>{
            <Element meta={meta} title={title} noHistory />
          }</Suspense>
        </div>
      </div>
    </div>
  )
}

export default Main
